<template>
  <div>
    <div class="up_wrap" v-if="syncType == 0">
      <div class="tip">该功能限企业版及以上版本使用</div>
      <el-button type="primary" @click="upMeal">立即升级 </el-button>
    </div>
    <div class="meal_dec" v-if="syncType == 1">
      <div class="meal_dec_title">功能介绍</div>
      <div class="meal_dec_text meal_dec_text_red">
        注：该功能限企业版及以上版本使用
      </div>
      <div class="meal_dec_text">
        小程序直播组件是微信给开发者提供的实时视频直播工具，可以帮助开发者快速通过小程序向用户提供优质的直播内容，在小程序内流畅完成购买交易闭环，提升转化率；
      </div>
      <div class="meal_dec_text">
        小程序直播组件包括观众端、主播端及后台管理端，其中观众端提供拉流、实时互动、订阅提醒、商品购买等能力，主播端提供开播、推流、音视频效果优化等能力，后台管理端则负责直播房间、商品货架以及营销活动配置等。
      </div>
      <div class="tip_image_box">
        <img
          class="tip_img"
          src="https://oss-tencent.bgniao.cn/api/u5.jpg"
          alt=""
        />
        <img
          class="tip_img"
          src="https://oss-tencent.bgniao.cn/api/u6.jpg"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
@Component({
  components: {},
})
export default class UpMealTP extends Vue {
  @PropSync("type", { type: String, default: "0" })
  syncType: string;

  upMeal() {
    this.$router.push("/meal");
  }
}
</script>

<style lang="scss" scoped>
.up_wrap {
  min-height: 200px;
  width: 100%;
  display: table;
  text-align: center;
}
.up_wrap .tip {
  margin-top: 90px;
  font-size: 12px;
  margin-bottom: 20px;
}
.content {
  vertical-align: middle;
  display: table-cell;
}
.align-center {
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
}
.meal_dec {
  font-size: 12px;
  .meal_dec_title {
    font-size: 13px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 10px;
  }
  .meal_dec_text {
    font-size: 13px;
    line-height: 30px;
    font-weight: 400;
    color: #333333;
  }
  .meal_dec_text_red {
    color: #ff0000;
  }
  .tip_image_box {
    margin-top: 20px;
    .tip_img {
      width: 266px;
      margin-right: 20px;
    }
  }
}
</style>
